<script setup lang="ts">
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts'

// 挂载的ref
const echart = ref()
onMounted(() => {
  const myCharts = echarts.init(echart.value)
  const option = {
    // 标题
    title: [{
      text: "今日文章发布量",
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      subtext: "5篇",
      subtextStyle: {
        color: "#8b51fd",
        fontSize: 20,
      },
      right: "30%",
      top: "5%",
    }],
    // 工具
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, 0)",
      textStyle: {
        color: "#FFF",
      },
    },
    // 网格
    grid: {
      left: "10%",
      top: "30%",
      right: "5%",
      bottom: "10%",
    },
    // x轴
    xAxis: {
      data: [
        "周一",
        "周二",
        "周三",
        "周四",
        "今天",
        "上周六",
        "上周日"
      ],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "#001529",
          width: 1,
        },
      },
      axisTick: {
        show: false, //隐藏X轴刻度
        alignWithLabel: true,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#deecff", //X轴文字颜色
          fontSize: 11,
        },
        interval: 0,
        formatter: function (value) {
          let ret = ""; //拼接加\n返回的类目项
          const maxLength = 4; //每项显示文字个数
          const valLength = value.length; //X轴类目项的文字个数
          const rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
          if (rowN > 1) {
            //如果类目项的文字大于5,
            for (let i = 0; i < rowN; i++) {
              let temp = ""; //每次截取的字符串
              const start = i * maxLength; //开始截取的位置
              const end = start + maxLength; //结束截取的位置
              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
              temp = value.substring(start, end) + "\n";
              ret += temp; //凭借最终的字符串
            }
            return ret;
          } else {
            return value;
          }
        },
      },
    },
    // y轴
    yAxis: [
      {
        type: "value",
        name: "数  量",
        nameTextStyle: {
          color: "#deecff",
          fontSize: 14,
        },
        nameGap: 30,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.05)",
          },
        },
        // 刻度
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true, //隐藏Y轴轴线
          lineStyle: {
            color: "#001529",
            width: 1,
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#deecff",
            fontSize: 11,
          },
        },
      },
      {
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#BDD8FB",
          fontSize: 12,
        },
        splitLine: {
          show: false,
          lineStyle: {
            width: 1,
            color: "#CED2DB",
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false, //隐藏右侧Y轴轴线
          lineStyle: {
            color: "#163a5f",
            width: 2,
          },
        },
      },
    ],
    // 样式
    series: [
      {
        name: "数量",
        type: "bar",
        barWidth: 10,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,  //右
            y: 0,  //下
            x2: 0,  //左
            y2: 1,  //上
            colorStops: [
              {
                offset: 0.1,
                color: '#bfa1ff' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#8b51fd' // 100% 处的颜色
              }
            ]
          },
          barBorderRadius: [20, 20, 20, 20],
        },
        label: {
          show: false,
          position: "top",
          distance: 0,
          color: "#1ACDDC",
          formatter: "{c}" + "次",
        },
        data: [1, 2, 3, 4, 5, 6, 7],
      }
    ],
  };
  myCharts.setOption(option)
})
</script>

<template>
  <div class="sort-box center">
    <div class="sort-box-body">
      <div class="charts-sort" ref="echart">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.sort-box {
  width: 100%;
  height: 100%;

  .sort-box-body {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    box-shadow: 2px 1px 8px 2px rgb(123, 173, 222);
    background-color: #555162;

    .charts-sort {
      width: 100%;
      height: 100%;
    }
  }
}
</style>